<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基金分析页面</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script src="/js/vue.min.js" type="text/javascript"></script>
    <script src="/js/axios.min.js" type="text/javascript"></script>
</head>
<body>
<h3>数据分析</h3>
<div id="app">
    <div id="main" style="width: auto;height:400px;"></div>
    <div id="compare" style="width: auto;height:400px;"></div>
    <div id="analysise" style="width: auto;height:400px;">
        <!--https://blog.csdn.net/lianzhang861/article/details/80422513   时间控件-->
        <input id="time" type="date" v-model="initTime"/>
        <button id="search" @click.prevent="search">查询</button>
        <table id="detailAna" border="1px">
        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            fundCode:"",
            initTime:"2021-03-09"
        },
        mounted:function () {
            this.fundCode = this.getCookie("fundCode");
            this.getAnalysis();
            //获取当前时间
            var day2 = new Date();
            day2.setTime(day2.getTime());
            var s2 = day2.getFullYear()+"-" + this.getzf(day2.getMonth()+1) + "-" + this.getzf(day2.getDate());
            this.initTime = s2;
            console.info(this.initTime);

        },
        methods: {
            getAnalysis(){
                //vue函数相互调用not defined
                var _this = this;
                var fundCode = this.fundCode;
                $.ajax({
                    //请求方式
                    type : "POST",
                    //请求的媒体类型
                    contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                    // contentType: "application/json/x-www-form-urlencoded;charset=UTF-8",
                    //请求地址
                    url : "http://localhost:8081/fund/analysise/all-funds",
                    //数据，json字符串
                    // data : JSON.stringify(list),
                    data : {"fundCode": fundCode},
                    //请求成功
                    success : function(result) {
                        console.log(result,"result");
                        // 基金净值
                        var worth = echarts.init(document.getElementById('main'));
                        var fundWorth = [];
                        var time = [];
                        var oneMonthIncome = [];
                        var threeMonthIncome = [];
                        var sixMonthIncome = [];
                        var oneYearIncome = [];
                        var twoYearIncome = [];
                        var threeYearIncome = [];


                        var index;
                        for (index in result.data) {
                            var value = result.data[index];
                            fundWorth.push(value.fundWorth.replace("%",""));
                            // time.push(value.createTime.slice(0,10));

                            //时间字符串转时间戳
                            var star = new Date(value.createTime);
                            var startTime = star.getTime();
                            time.push(_this.getMyDate(startTime).slice(0,10));
                            oneMonthIncome.push(value.oneMonthIncome.replace("%",""));
                            threeMonthIncome.push(value.threeMonthIncome.replace("%",""));
                            sixMonthIncome.push(value.sixMonthIncome.replace("%",""));
                            oneYearIncome.push(value.oneYearIncome.replace("%",""));
                            if(null != value.twoYearIncome) {
                                twoYearIncome.push(value.twoYearIncome.replace("%",""));
                            }
                            // twoYearIncome.push();
                            threeYearIncome.push(value.threeYearIncome.replace("%",""));
                        }
                        // console.info(time);
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '基金净值'
                            },
                            tooltip: {},
                            legend: {
                                data:['基金净值']
                            },
                            xAxis: {
                                data: time
                            },
                            yAxis: {},
                            series: [{
                                name: '净值',
                                type: 'bar',
                                data: fundWorth
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        worth.setOption(option);

                        //收益对比
                        var compare = echarts.init(document.getElementById('compare'));

                        var optionCom = {
                            title: {
                                text: '收益图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['近1月收益', '近3月收益', '近6月收益', '近1年收益', '近2年收益','近3年收益']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: time
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '近1月收益',
                                    type: 'line',
                                    stack: '总量',
                                    data: oneMonthIncome
                                },
                                {
                                    name: '近3月收益',
                                    type: 'line',
                                    stack: '总量',
                                    data: threeMonthIncome
                                },
                                {
                                    name: '近6月收益',
                                    type: 'line',
                                    stack: '总量',
                                    data: sixMonthIncome
                                },
                                {
                                    name: '近1年收益',
                                    type: 'line',
                                    stack: '总量',
                                    data: oneYearIncome
                                },
                                {
                                    name: '近2年收益',
                                    type: 'line',
                                    stack: '总量',
                                    data: twoYearIncome
                                },
                                {
                                    name: '近3年收益',
                                    type: 'line',
                                    stack: '总量',
                                    data: threeYearIncome
                                }
                            ]
                        };
                        compare.setOption(optionCom);
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                        console.log(e.status);
                        console.log(e);
                    }
                });
            },
            getCookie(cname){
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for(var i=0; i<ca.length; i++)
                {
                    var c = ca[i].trim();
                    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
                }
                return "";
            },
            getMyDate(str){
                // //时间戳字符串转时间格式字符串
                // var time = new Date(rowData.startTime)
                // value = time.toLocaleString();
                // //时间字符串转时间戳
                // var star = new Date(rowData.startTime);
                // startTime : star.getTime(),
                var oDate = new Date(str),
                    oYear = oDate.getFullYear(),
                    oMonth = oDate.getMonth()+1,
                    oDay = oDate.getDate(),
                    oHour = oDate.getHours(),
                    oMin = oDate.getMinutes(),
                    oSen = oDate.getSeconds(),
                    oTime = this.getzf(oMonth) +'/'+ this.getzf(oDay) +'/'+ oYear +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间
                return oTime;
            },//补0操作
            getzf(num){
                if(parseInt(num) < 10){
                    num = '0'+num;
                }
                return num;
            },
            search(){
                var fundCode = this.fundCode;
                var time = this.initTime;
                // var strTime="2011-04-16";    //字符串日期格式
                var date= new Date(Date.parse(time.replace(/-/g,  "/")));      //转换成Data();
                console.info(date);
                $.ajax({
                    //请求方式
                    type : "POST",
                    //请求的媒体类型
                    contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                    // contentType: "application/json/x-www-form-urlencoded;charset=UTF-8",
                    //请求地址
                    url : "http://localhost:8081/fund/analysise/fund-analysis-time",
                    //数据，json字符串
                    // data : JSON.stringify(list),
                    data : {"fundCode": fundCode,"createTime":date},
                    //请求成功
                    success : function(result) {
                        var str = "<tr>\n" +
                            "            <td>近1年盈利收益率</td>\n" +
                            "            <td>近1年市盈率</td>\n" +
                            "            <td>近3年盈利收益率</td>\n" +
                            "            <td>近3年市盈率</td>\n" +
                            "        </tr>";
                        var ele;
                        for(ele in result.data) {
                            console.info(result.data[ele],"ele");
                            str +="<tr>";
                            str +="<td>"+result.data[ele].oneYearEarningsYield+"</td>";
                            str +="<td>"+result.data[ele].oneMonthPeRatio+"</td>";
                            str +="<td>"+result.data[ele].threeYearEarningsYield+"</td>";
                            str +="<td>"+result.data[ele].threeMonthPeRatio+"</td>";
                            str +="</tr>";
                        }
                        $("#detailAna").html(str);

                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                        console.log(e.status);
                        console.log(e.responseText);
                    }
                });
            }
        }
    });
</script>
</body>
</html>